<!--组件-交易对-->
<template>
  <div v-if="isShow">

    <!--普通交易对-->
    <div class="pair bg2" @click="pairClick"  v-if="arrow">

      <text class="font32 text1">{{(pairMap.counterCoin+'/'+pairMap.baseCoin)}}</text>
      <div :class="['type', config.upDownBg((pairMap.singal == '看多'))]" v-if="pairMap.singal">
        <text class="font18 text1">{{pairMap.singal}}</text>
      </div>

      <div class="all"></div>
      <div class="column aend">
        <text :class="['font32', config.upDownFont(pairMap.increase)]">{{config.toNonNum(math.xiaoShuDelete0(pairMap.last))}}</text>
        <text :class="['font20', config.upDownFont(pairMap.increase)]">{{'('+(math.getNumber(pairMap.increase) > 0 ? "+" : '')+pairMap.increase+'%'+')'}}</text>
      </div>

      <LImage class="arrow-image" :src="config.img('strategy_arrow.png')"></LImage>
    </div>

    <!--多币对交易对-->
    <div class="pair bg2" v-else>

      <text class="font32 text1">{{(pairMap.counterCoin+'/'+pairMap.baseCoin)}}</text>
      <div :class="['type', config.upDownBg((pairMap.singal == '看多'))]" v-if="pairMap.singal">
        <text class="font18 text1">{{pairMap.singal}}</text>
      </div>

      <div class="all"></div>
      <div class="column aend">
        <text :class="['font32', config.upDownFont(pairMap.increase)]">{{math.xiaoShuDelete0(pairMap.last)}}</text>
        <text :class="['font20', config.upDownFont(pairMap.increase)]">{{'('+(math.getNumber(pairMap.increase) > 0 ? "+" : '')+pairMap.increase+'%'+')'}}</text>
      </div>
      
      <div class="close" @click="closeClick">
        <LImage class="close-image" :src="config.img('guanbi.png')"></LImage>
      </div>
    </div>
    
  </div>
</template>

<script>

import math from "@/_js/math";
import config from "@/_js/config";
import mPair from "@/up/amPair";
const weexFunction = weex.requireModule('WeexFunction');

export default {
  props:{
    pairMap: Object, //交易对信息

    arrow:{
      type:Boolean,
      default:true,
    }
  },

  watch: {
    pairMap: {
      deep: false,
      handler (val, oldVal) {
        mPair.unSubscribes(oldVal);
        mPair.subscribes(val, this.message);
      }
    }
  },

  data() {
    return {
      config:config,
      math:math,
      isShow:false,
      isDisappear:false, //turn已隐藏

      message:undefined, //消息回调
    };
  },

  mounted(){

    config.init(()=>{
      this.isShow = true;
    },[config.OPT_UP_DOWN]);

    //消息回调
    this.message = (last, increase)=>{
      this.pairMap.last = last;
      this.pairMap.increase = increase;
    }
    
    mPair.subscribes(this.pairMap, this.message);
  },

  //移除时触发
  destroyed(){
    mPair.unSubscribes(this.pairMap);
  },

  methods:{

    /*************************************************通信触发*/
    //完全显示
    viewappear() {
      if (!this.isDisappear) {
        return;
      }
      mPair.subscribes(this.pairMap, this.message);
    },

    //完全隐藏
    viewdisappear() {
      this.isDisappear = true;
      mPair.unSubscribes(this.pairMap);
    },
    
    /********************************** 点击触发*/
    //交易对
    pairClick(){
      this.$emit("pairClick");
    },

    //关闭对
    closeClick(){
      this.$emit("closeClick");
    },
  }
}
</script>



<style src="@/_css/style.css"></style>
<style scoped>
.pair {
  flex-direction: row;
  align-items: center;
  height: 108px;
  border-radius: 16px;

  padding-left: 40px;
}
.type{
  flex-direction: row;
  align-items: center;
  height: 28px;
  border-radius: 4px;
  padding-left: 6px;
  padding-right: 6px;

  margin-left: 20px;
}
.arrow-image{
  width: 20px;
  height: 20px;

  margin-left: 40px;
  margin-right: 40px;
}

.close {
  justify-content: row;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 108px;
}
.close-image {
  width: 20px;
  height: 20px;
}
</style>
